#{extends 'main.html' /}
#{set title:'Iction Home' /}
#{set 'moreStyles'}
<!--导入Zebra_DatePicker(日期控件)样式CSS-->
<link rel="stylesheet" type="text/css" href="@{'public/javascripts/Zebra_DatePicker/css/default.css'}" charset="utf-8">
#{/set}
#{set 'moreScripts'}
<!--导入kindeditor(富文本编辑器)相关文件-->
#{script src='kindeditor/kindeditor.js'/}
#{script src='kindeditor/lang/zh_CN.js'/}
<!--导入layer(web弹窗/层)相关文件-->
#{script src='layer/layer.min.js'/}
<!--导入Zebra_DatePicker(日期控件)-->
#{script src='Zebra_DatePicker/Zebra_DatePicker.min.js'/}
<!--初始化kindeditor-->
<script>
$(document).ready(function(){
	var editor;
	var options = {
		width : '506px',
		minWidth: 506,
		uploadJson : '@{Ajax.addArticleImg}',
		fileManagerJson : '@{Ajax.addArticleManager}',
		allowFileManager : true,
		autoHeightMode : true,
		afterCreate : function() {this.loadPlugin('autoheight');},
		resizeType : 1,
		allowPreviewEmoticons : false,
		items : [
				'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
				'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
				'insertunorderedlist', '|', 'image', 'link', 'unlink', 'table', '|', 'about']
	};
	KindEditor.ready(function(K) {
		editor = K.create('#editor_acticle',options);
	});
});
<!--保存kindeditor内容并上传-->
function syncHtml(){
	editor.sync();
}
</script>

<!--Edit-layer init-->
<script>
$(document).ready(function(){
	$(".edit").click(function(){
		var va = $(this).parent().parent().children().eq(0).children().eq(1).val();
		$.layer({
		    type: 2,
		    shade: [0],
		    fix: false,
		    title: 'Article Edit',
		    maxmin: true,
		    iframe: {src : 'edit?id=' + va},
		    area: ['800px' , '440px'],
		    close: function(index){}
		}); 
	});
});
</script>

<!--Ajax js-->
<script>
function editPost(art_id){
	$.post("@{ArticleAdmin.edit}",{id:art_id});
}
</script>

<!--Page CSS And Other JQuery-->
<script>
$(document).ready(function(){
	$(".submenu > ul > li > a").eq(1).addClass("selected");
	
	//绑定删除按钮事件
	$(".detele").click(function(){
		var va = $(this).parent().parent().children().eq(0).children().eq(1).val();
		layer.confirm('你确定要删除吗？',function(){
			$.post("@{ArticleAdmin.delete}",{id:va});
			layer.msg('删除成功！')
			parent.location.reload();
		})
	});
	
	//添加时间日期控件
	$('#dateStart').Zebra_DatePicker({
		  direction: true,
		  pair: $('#dateStart')
	});

	$('#dateEnd').Zebra_DatePicker({
		  direction: 1
	});
});
</script>
#{/set}

<div id="right_wrap">
	<div id="right_content">  
	#{form @ArticleAdmin.index(), method:'GET'}           
		<h2>
			<span>Article Tables</span>
			<span style="padding-left: 0px;">
				<input id="dateStart" name="dateStart">
				<input id="dateEnd" name="dateEnd">
				<select style="font-size: 14px;border: 2px inset;" name="searchType">
					<option></option>
					<option>&{'title'}</option>
					<option>&{'introduce'}</option>
					<option>&{'user.name'}</option>
				</select>
				<input name="searchCondition" type="text">
				<input type="submit" class="form_submit" value="&{'search'}"  style="float: none;">
			</span>
		</h2> 
	#{/form}
		<table id="rounded-corner">
		    <thead>
		    	<tr>
		    		<th></th>
		        	<th>createDate</th>
		        	<th>User</th>
		            <th>Title</th>
		            <th>introduce</th>
		            <th>Edit</th>
		            <th>Delete</th>
		        </tr>
		    </thead>
		    <tfoot>
		    	<tr>
		        	<td colspan="12">%{
		        		if(totalPage != 1){
		        			println	"<a href='?length=1&searchType=${searchType}&searchCondition=${searchCondition}'>[首页]</a>"
			        		for(i = 1; i <= totalPage; i++){
			        			println "<a href='?length=" + i + "&searchType=${searchType}&searchCondition=${searchCondition}'>[" + i + "]</a>"
			        		}
			        		println	"<a href='?length=${totalPage}&searchType=${searchType}&searchCondition=${searchCondition}'>[尾页]</a>"
			        	}//end if
		        	}%</td>
		        </tr>
		    </tfoot>
		    <tbody>
		    %{
				for(i = 0; i < arts?.size(); i++){
					String strClass = (i%2 == 0 ? "odd" : "even")
					println "<tr class=\"" + strClass + "\">"
					println "<td><input type='checkbox' name='' /><input type='hidden' name='id' value='" + arts[i].id + "'></td>"
					println "<td>" + arts[i].createDate?.format("yyyy-MM-dd") + "</td>"
					println "<td>" + arts[i].user?.name + "</td>"
					println "<td>" + arts[i].title + "</td>"
					println "<td>" + arts[i].introduce + "</td>"
					println "<td><a href='#' class='edit'><img src='/public/images/edit.png' alt='' title='' border='0' /></a></td>"
					println "<td><a href='#' class='detele'><img src='/public/images/trash.gif' alt='' title='' border='0' /></a></td>"
				}
			%}
		    </tbody>
		</table>
	
		<div class="form_sub_buttons">
		<a href="#" class="button green">Edit selected</a>
	    <a href="#" class="button red">Delete selected</a>
	    </div>
	    
	    
	    <div class="toogle_wrap" style="padding: 10px 0 10px 0px;">
		    <div class="trigger">
				<a href="#tab1"style="padding: 0 0 0 15px;">&{'Article'} &{'Add'}</a>
		    </div>
		#{form @Form.addArticle(), onSubmit:'return syncHtml()', style:'display: none;'}
		    <div id="tab1" class="tabcontent" style="background-color: white;">
		        <h3>Article Commit</h3>
		        <div class="form">
		            <div class="form_row">
			            <label>Title:</label>
			            <input type="text" class="form_input" name="article.title" />
			            <span class="error">#{error 'article.title'/}</span>
		            </div>
		            <div class="form_row">
			            <label>Introduce:</label>
			            <input type="text" class="form_input" name="article.introduce" />
			            <span class="error">#{error 'article.introduce'/}</span>
		            </div>
		            <div class="form_row">
			            <label>Content:</label>
			            <textarea class="form_textarea" name="article.content" id="editor_acticle"></textarea>
			            <span class="error">#{error 'article.content'/}</span>
		            </div>
		            <div class="form_row">
		            	<input type="submit" class="form_submit" value="Submit" />
		            </div> 
		            <div class="clear"></div>
		        </div>
		    </div>
	    </div><!--div-toogle_wrap end-->
		#{/form}
	</div>	<!--end -->
</div><!-- end of right content-->